<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <!-- 搜索栏 -->
      <form class="el-form el-form--inline avue-crud__search" style="margin: 14px 0px -47px 15px">
        <div class="el-form-item">
          <label class="el-form-item__label">课题名称:</label>
          <div class="el-form-item__content">
            <el-input v-model="plantitle" size="small" placeholder="请输入内容" clearable></el-input>
          </div>
        </div>
        <div class="el-form-item avue-crud__searchMenu">
          <div class="el-form-item__content">
            <el-button type="warning" size="small" @click.stop="searchSubmit()">查询</el-button>
          </div>
        </div>
      </form>
      <div style="float: right;margin:19px 12px 9px 0px">
        <el-button type="primary" size="mini" @click="subjectLevyResult()">课题征集</el-button>
        <el-button type="success" size="mini" @click="draftSubjectPlan()">增补课题</el-button>
        <el-button type="warning" size="mini" @click="subjectLevy11()">导出</el-button>
      </div>
      <div class="card-body">
        <el-table
          :data="tableData"
          style="width: 100%"
          row-key="id"
          border
          :row-class-name="tableRowClassName"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
            align="left"
            prop="mainTitle"
            label="名称"
            width="500">
            <template slot-scope="scope">
              <span v-if="!scope.row.isChild">{{scope.row.mainTitle}}</span>
              <a style="cursor:pointer;" @click="subjectDetail(scope.row.subjectId)" v-if="scope.row.isChild">{{scope.row.mainTitle}}</a>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间"
            :formatter="formatterTime">
          </el-table-column>
          <el-table-column
            align="center"
            prop="state"
            label="状态"
            :formatter="formatterState">
          </el-table-column>
          <el-table-column
            align="center"
            width="140">
            <template slot="header" slot-scope="scope">
              <span>操作</span>
            </template>
            <template slot-scope="scope">
              <div class="menu-title" @click.stop="editSubject(scope.row,scope.index)"
                   v-if="scope.row.isChild">
                <i class="iconfont iconalter icon-warning"></i>
                <p class="menu-title-text">列入计划</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[2,5, 10, 20, 30, 40 ,50]"
            :current-page="page.currentPage"
            :page-size="page.pageSize"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            class="paginationcss">
          </el-pagination>
        </div>
      </div>
    </div>
  </basic-container>
</template>

<script>
  import {getSubjectTreeList} from "@/api/subject";

  export default {
    //此页面弃用
    name: "subjectProtocol",
    created() {
      var self = this;
      window.subjectDetail = self.subjectDetail;
      this.putTableData();
    },
    data() {
      return {
        headerData: {
          title: '课题列表'
        },
        tableData:[],
        formatterTime: function (row, value, label, column) {
          if (row.createTime != null) {
            var data = row.createTime.split(' ');
            return data[0];
          }
        },
        formatterState: function (row, value, label, column) {
          if (row.state == '0') {
            return '拟定';
          }else if(row.state == '4'){
            return '已分配单位';
          }
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 5 // 每页显示多少条
        },

      }
    },
    methods: {
      // 课题征集结果跳转
      subjectLevyResult() {
        let src = `/subjectLevyResult/detail`;
        this.$router.push({
          path: src
        })
      },
      // 编辑课题跳转
      editSubject(row) {
        let src = `/editSubject/detail/${row.subjectId}`;
        this.$router.push({
          path: src
        })
      },
      // 课题详情跳转
      subjectDetail(subjectId) {
        let src = `/subjectDetail/detail/${subjectId}`;
        this.$router.push({
          path: src
        })
      },
      // 课题详情跳转
      draftSubjectPlan() {
        sessionStorage.setItem('draftSubjectPlan.achievementTitle', '');
        sessionStorage.setItem('draftSubjectPlan.achievementId', '');
        sessionStorage.setItem('draftSubjectPlan.title', '');
        sessionStorage.setItem('draftSubjectPlan.description', '');
        let src = `/draftSubjectPlan/index`;
        this.$router.push({
          path: src
        })
      },
      putTableData() {
        getSubjectTreeList(Object.assign({
          current: this.page.currentPage,
          size: this.page.pageSize,
          states: '0',
        })).then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },
      handleSizeChange(val) {
        var page = this.page;
        page.pageSize = val;
        this.pageputTableData(page);
      },
      handleCurrentChange(val) {
        var page = this.page;
        page.currentPage = val;
        this.pageputTableData(page);
      },
      pageputTableData(page) {
        getSubjectTreeList(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          states: '0',
        })).then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },
    tableRowClassName({row, rowIndex}) {
      if (row.state == undefined) {
        return 'success-row';
      }
      return '';
    }
    }
  }
</script>

<style lang="scss" scoped>
  .card-body {
    padding: 10px;
    min-height: 400px;
    padding-bottom: 64px;
  }
  .paginationcss {
    margin-top: 20px;
    float: right;
    margin-right: 28px;
  }
</style>
